import Vue from "vue"

import VueRouter from "vue-router"

// import Discover from "../pages/Discover"
import Mine from "../pages/Mine"

Vue.use(VueRouter)

//components放常规组件

//pages放页面组件

//配置路由的流程

//1.创建页面组件

//2.配置routes 基本属性 path 路径 component 路径被访问的时候 需要加载的组件

//3.router-view 进行展示

//定义路由配置

//webpack(当前的项目)在构建(build)的时候会将所有的资源和页面逻辑打包到一个文件中,造成这个文件很大,访问的时候需要等待文件全部加载完毕,才能开始渲染页面,用户体验不好

//使用import()这种语法将代码进行分割,webpack识别到这种代码的时候,就会将这一块内容单独的分割出一个包 chunk

const routes = [
    //同一个路径可以匹配多个路由,那么谁先编写,谁的优先级别就更高
    {
        path: "/discover",
        redirect:"/discover/toplist",//路由重定向
        component: ()=>import(/*webpackChunkName:'discover'*/"../pages/Discover"),
        children: [
            {
                name: "play",//具名路由,好处就是跳转的时候可以不用记住那么多的1 2 3级路径了 直接使用name就可以金子女宫跳转
                path: "playlist",//子路由的path属性是不能加/的
                component: () => import(/*webpackChunkName:'playlist' */"../pages/Discover/Playlist")
            },
            {
                name: "top",
                path: "Toplist",//子路由的path属性是不能加/的
                component: () => import(/*webpackChunkName:'Toplist' */"../pages/Discover/Toplist")
            },
            {
                path: "Djradio",//子路由的path属性是不能加/的
                component: () => import(/*webpackChunkName:'Djradio' */"../pages/Discover/Djradio")
                // components: {
                //     a: ()=>import(/*webpackChunkName:'777'*/"../pages/Discover"),
                //     b: Mine
                // }
            },
        ]
    },
    // {
    //     path: "/discover",
    //     component: ()=>import('../pages/Page404')
    // },
    {
        path: "/mine",
        component: Mine
    },
    {
        //访问到了这个页面的时候才会加载,所以称之为路由懒加载
        //动态路由
        path: "/gays/:id",
        component: () => import(/*webpackChunkName:'gays'*/"../pages/Gays")
    },
    {
        path: "/food",
        component: () => import(/*webpackChunkName:'food'*/"../pages/Food")
    },
    {
        path: "/detail/:id",
        //动态路由参数解耦合 组件可以通过props来接收动态路由参数了
        props:true,
        component: () => import(/*webpackChunkName:'Detail'*/"../pages/Detail")
    },
    {
        path: "*",//使用通配符表示其它页面
        component: () => import(/*webpackChunkName:'page404'*/"../pages/Page404")
    }
]

export default new VueRouter({
    routes
})